<template>
  <div class="cart-control">
      <transition name="move">
          <div class="el-icon-remove-outline icon1" v-show="food.count" @click.stop="updatefoodCount(false)"></div>
      </transition>
      <div class="count" v-show="food.count">{{food.count}}</div>
      <div class="el-icon-circle-plus-outline icon2" @click.stop="updatefoodCount(true)"></div>
  </div>
</template>

<script>
export default {
    props:{
        food:Object
    },
    methods:{
        updatefoodCount(isAdd){
            this.$store.dispatch('updatefoodCount',{isAdd,food:this.food})
        }
    }
}
</script>

<style lang="less" scoped>
.cart-control{
    display: flex;
    justify-content: space-around;
    position: relative;
    float: right;
    .el-icon-remove-outline,.el-icon-circle-plus-outline{
        display: inline-block;
        padding: 4px;
        line-height: 24px;
        font-size: 20px;
        color: #029b77;
        &.move-enter-active,&.move-leave-active{
            transition: all .3s;
        }
        &.move-enter,&.move-leave-to{
            opacity: 0;
            transform: translateX(15px) rotate(180deg);
        }
    }
    .count{
        display: inline-block;
        vertical-align: top;
        width: 10px;
        padding-top: 4px;
        line-height: 20px;
        text-align: center;
        font-size: 10px;
        color: rgb(147, 153, 159);
    }
}
</style>